import React, { FC, ReactNode } from 'react';
import styles from './index.less';

interface Props {
  title: string;
  extra?: string | ReactNode;
  contentStyle?: React.CSSProperties;
}

const Index: FC<Props> = ({ title, extra, contentStyle, children }) => {
  return (
    <div className={styles.container}>
      <h4 className={styles.title}>
        {title}
        {extra && <span>{extra}</span>}
      </h4>
      <div className={styles.content} style={contentStyle}>
        {children}
      </div>
    </div>
  );
};

export default Index;
